<template>
  <div class="background">
    <div class="content">
      <div class="titleLine">
        <div class="icon" />
        <div class="title">养老管理系统</div>
      </div>
      <div class="form">
        <el-form :model="formLogin">
          <el-form-item>
            <el-input
              v-model="formLogin.username"
              prefix-icon="el-icon-user"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formLogin.password"
              prefix-icon="el-icon-lock"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="login" style="width: 100%;" type="primary"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item>
            <router-link to="/Register">尚未注册？点击注册</router-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      formLogin: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      this.$router.push("/HomePage");
    }
  }
};
</script>

<style scoped>
.background {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-attachment: fixed;
  background-image: url("../assets/login/background.png");
  background-position: center center;
  background-repeat: no-repeat no-repeat;
  background-size: cover;
}
.content {
  width: 360px;
  height: auto;
  box-sizing: content-box;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 3px 3px 15px 1px rgba(22, 33, 22, 0.2);
}
.titleLine {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.icon {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin-top: 6px;
  background-image: url("../assets/logo.png");
  background-size: 100% 100%;
}
.title {
  margin-left: 5px;
  color: rgb(42, 42, 42);
  font-size: 24px;
  text-align: center;
}
.form {
  width: 80%;
  margin: 40px auto 20px;
}
</style>
